<template>
	<div class="w_view">
		<van-nav-bar :fixed="true" :border="false" title="资金明细" left-arrow @click-left="onClickLeft" right-text="筛选"
		 @click-right="showPicker = true" />

		<div style="width: 100%;height: .17rem;background-color: rgb(251,251,251);"></div>

		<van-pull-refresh v-model="refreshing" @refresh="onRefresh">

			<!-- <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> -->
				
				<div v-if="withdrawalData.length > 0" class="wv_item" v-for="item,index in withdrawalData" :key="index">

					<div class="wi_left">

						<div class="wl_time">
							{{item.dstr}}日
						</div>

						<div class="wl_tright">
							<p v-if="type == 1">提现 - 尾号 {{item.bstr}}</p>
							<p v-if="type == 2">充值</p>
							<p v-if="type == 3">划转</p>
							<p class="wl_fstime">{{item.hstr}}</p>
						</div>

					</div>

					<div class="wi_right" :style="item.tq_status == 0 ? 'color:#999' : item.tq_status == 1 ? 'color:green' : 'color:red'">
						<p>{{type != 3 ? '￥' : ''}}{{item.tq_nums}}</p>
						
						<p v-if="item.type == 1">{{item.tq_status == 0 ? '正在审核 ' : item.tq_status == 1 ? '提现成功' : '提现失败'}}</p>
						
						<p v-if="item.type == 2">{{item.tq_status == 0 ? '正在审核 ' : item.tq_status == 1 ? '充值成功' : '充值失败'}}</p>
						
						<p v-if="type == 3">{{item.tq_status == 0 ? '正在审核 ' : item.tq_status == 1 ? '划转成功' : '划转失败'}}</p>
					
					</div>

				</div>


				<div v-if="withdrawalData.length <= 0">
					<img style="width: 1.5rem;height: 1.2rem; display: block;margin: auto;margin-top: 1rem;margin-bottom: 100%;" :src="myApp.srcPath('zanwu.png')"
					 alt="">
				</div>

			<!-- </van-list> -->
			
		</van-pull-refresh>

		<van-popup v-model="showPicker" round position="bottom">
			<van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
		</van-popup>

	</div>

</template>

<script>
	import Vue from 'vue';
	import {
		NavBar,
		Toast,
		List,
		PullRefresh,
		Picker,
		Popup
	} from 'vant';

	Vue.use(NavBar);
	Vue.use(List);
	Vue.use(PullRefresh);
	Vue.use(Picker);
	Vue.use(Popup)

	import {
		WithdrawalList
	} from '../serve/api.js'

	export default {
		created() {

			this.WithdrawalListInfo()

		},
		data() {
			return {

				list: [],

				//上拉到底的加载动画  true的时候显示加载完成
				loading: false,

				//是否已加载完成
				finished: false,

				//下拉刷新动画
				refreshing: false,

				//资金记录
				withdrawalData: "",

				//选择的值
				value: '',

				//选择栏显示隐藏
				showPicker: false,

				columns: ['提现', '充值', '划转'],
				
				//1 提现     2 充值
				type:1
			}
		},

		methods: {
			onConfirm(value) {
				
				console.log(value)
				
				this.value = value;
				
				this.showPicker = false;
				
				value == '提现' ? this.type = 1 : value == '充值' ? this.type = 2 : this.type = 3
				
				this.WithdrawalListInfo()
				
			},

			onLoad() {

				// console.log("到底")

				// setTimeout(() => {
				// 	if (this.refreshing) {
				// this.refreshing = false;
				// 	}

				// 	for (let i = 0; i < 10; i++) {
				// 		this.list.push(this.list.length + 1);
				// 	}
				// 	this.loading = false;

				// 	if (this.list.length >= 40) {
				// 		// this.finished = true;
				// 	}
				// }, 1000);
			},
			onRefresh() {

				// console.log("我触发了刷新")

				// 清空列表数据
				this.finished = false;

				// 重新加载数据
				// 将 loading 设置为 true，表示处于加载状态
				this.loading = true;
				
				
					setTimeout(() => {
				
						let refPromise = new Promise((success, failure) => {
				
							let params = {
								//1 提现
								type:this.type
							};
				
							WithdrawalList(params, (res) => {
				
								if (res.data.code == 1) {
				
									success(true)
				
									this.withdrawalData = res.data.data
				
								}
				
							}, (error) => {
				
								failure(false)
				
							})
				
						})
				
						refPromise.then((status) => {
				
							this.refreshing = false;
				
							Toast("刷新成功")
				
						}).catch((status) => {
				
							this.refreshing = false;
				
							Toast("刷新失败")
				
						})
				
				
				
					}, 1000)
			},
			WithdrawalListInfo() {

				let params = {
					//1 提现
					type:this.type
				};

				WithdrawalList(params, (res) => {

					// console.log(res)

					if (res.data.code == 1) {

						// Toast("获取成功")

						this.withdrawalData = res.data.data


					}



				}, (error) => {

				})

			},
			onClickLeft() {
				// Toast('返回');
				this.$router.go(-1)

			}
		},
	};
</script>

<style scoped="">
	.wi_left {
		display: flex;
		align-items: center;
	}

	.wi_right {
		color: #F9040A;
		font-size: .28rem;
	}

	.wl_fstime {
		color: #999999;
		font-size: .24rem;
	}

	.wl_tright span {
		color: #333;
	}

	.wl_tright {
		color: #333333;
		font-size: .28rem;
		display: flex;
		flex-direction: column;
	}

	.wl_time {
		margin-right: .2rem;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: .24rem;
		color: #999;
		padding-right: .25rem;
		border-right: 1px solid #999;
	}

	.wv_item {
		margin-top: .1rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: .25rem .3rem;
		box-sizing: border-box;
		background-color: white;
		border-bottom: 1px solid rgb(251, 251, 251);
	}

	.wi_iptViews input {
		margin-left: .35rem;
	}

	.wi_iptViews {
		padding: .3rem 0rem;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		font-size: .24rem;
		border-bottom: 1px solid #F1F1F1;
	}

	.wq_bot {
		text-align: center;
		margin-top: .16rem;
		color: #999999;
		font-size: .24rem;
		margin-bottom: 1rem;
	}

	.w_qr {
		margin: auto;
		width: 3.8rem;
		height: .66rem;
		background: rgba(29, 88, 255, 1);
		border-radius: .33rem;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: .32rem;
		margin-top: 1.96rem;
	}

	.wit_left img {
		width: .87rem;
		height: .52rem;
		margin-right: .39rem;
	}

	.wit_view {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: .61rem;
	}

	.wit_left {
		font-size: .28rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.w_sxf {
		font-size: .24rem;
		color: #999;
		margin-top: .3rem;
	}

	.wi_itpView input::placeholder {
		color: rgb(241, 241, 241);
	}

	.wi_itpView input {
		width: 60%;
		font-size: .72rem;
	}

	.wi_itpView {
		border-bottom: 1px solid #F1F1F1;
		padding: .3rem .21rem .3rem 0rem;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #1D58FF;
		font-size: .24rem;
	}

	.wi_title {
		font-size: .32rem;
	}

	.w_itemt {
		margin-top: .17rem;
		padding: .46rem .41rem .3rem .41rem;
		box-sizing: border-box;
		background-color: white;
	}

	.w_top img {
		width: 2.1rem;
		height: 1.47rem;
		margin-bottom: .32rem;
	}

	.w_top {
		display: flex;
		flex-direction: column;
		background-color: white;
		align-items: center;
		color: #1D58FF;
		font-size: .28rem;
		padding-bottom: .56rem;
		padding-top: .48rem;
	}

	.uploadDiv input {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	.uploadDiv {
		position: relative;

	}

	.su_view {
		font-size: .28rem;
		padding: 0rem 0.25rem;
		box-sizing: border-box;
	}

	.su_item {
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: .25rem .25rem;
		box-sizing: border-box;
	}

	.su_item img {
		width: 1.12rem;
		height: 1.12rem;
	}

	.su_itemt {
		padding-top: .5rem;
	}

	.w_view {
		position: absolute;
		padding-top: 40px;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
	}
</style>
